<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<link rel="stylesheet" type="text/css" href="css/ind-aside.css"/>
<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
<style type="text/css">
	.swiper-pagination{
		text-align: right;
	}
		.swiper-pagination-bullet{
			width: 15px;
			height: 15px;
			background:white;
			border-radius: 50%;
		}
</style>
</head>
<body>
	<div class="ind-out">
		<div class="ind-aside">
			<div class="ind-aside-head">
				<i class="icon ind-aside-icon1 iconfont">&#xe600;</i>
				<i class="icon ind-aside-icon1 iconfont">&#xe604;</i>
			</div>
			<div class="ind-aside-top">
				<div class="ind-asie-tou"><img src="img/aside-tou.png"/><input type="file" capture="camera" accept="image/*"></div>
				<h2><a href="javascript:;">请登录</a></h2>
			</div>
			<div class="ind-aside-main">
				<ul class="ind-aside-list">
					<li><a href="jacascript:;"><img src="img/index-aside1.jpg"/></a><span>校园新闻</span><i class="icon iconfont">&#xe615;</i></li>
					<li><a href="jacascript:;"><img src="img/index-aside2.jpg"/></a><span>教育培训</span><i class="icon iconfont">&#xe615;</i></li>
					<li><a href="html/friend.html"><img src="img/index-aside3.jpg"/></a><span>微圈子</span><i class="icon iconfont">&#xe615;</i></li>
					<li><a href="jacascript:;"><img src="img/index-aside4.jpg"/></a><span>跳蚤市场</span><i class="icon iconfont">&#xe615;</i></li>
					<li><a href="jacascript:;"><img src="img/index-aside5.jpg"/></a><span>兼职吧</span><i class="icon iconfont">&#xe615;</i></li>
					<li><a href="jacascript:;"><img src="img/index-aside6.jpg"/></a><span>个人中心</span><i class="icon iconfont">&#xe615;</i></li>
				</ul>
			</div>
		</div>
		<div class="ind-head">
			<i class="icon ind-icon1 iconfont">&#xe603;</i>
			<h1>叽喳校园</h1>
			<i class="icon ind-icon1 iconfont">&#xe604;</i>
		</div>
		<div class="ind-main">
			<div class="ind-vive">
				<div class="swiper-container">
				    <div class="swiper-wrapper">
				        <div class="swiper-slide"><a href="avascript:;"><img src="img/index-lun1.jpg"/></a></div>
				        <div class="swiper-slide"><a href="avascript:;"><img src="img/index-lun2.jpg"/></a></div>
				        <div class="swiper-slide"><a href="avascript:;"><img src="img/index-lun3.jpg"/></a></div>
				        <div class="swiper-slide"><a href="avascript:;"><img src="img/index-lun4.jpg"/></a></div>
				    </div>
				    <!-- 如果需要分页器 -->
				    <div class="swiper-pagination">
				    	
				    </div>
		   </div>
			</div>
			<!--轮播图 end-->
			<div class="ind-list">
				<div class="ind-list-le">
					<div class="ind-list-le-top">
						<p>
							<a href="javascript:;"></a>
							<span>校园新闻</span>
						</p>
					</div>
					<div class="ind-list-le-bot">
						<p>
							<a href="javascript:;"></a>
							<span>跳蚤市场</span>
						</p>
					</div>
				</div>
				<div class="ind-list-re">
					<div class="ind-list-re-top">
						<p>
							<a href="javascript:;"></a>
							<span>教育培训</span>
						</p>
					</div>
					<div class="ind-list-re-cen">
						<p>
							<a href="html/friend.html"></a>
							<span>微圈子</span>
						</p>
					</div>
					<div class="ind-list-re-bot">
						<p>
							<a href="javascript:;"></a>
							<span>兼职吧</span>
						</p>
					</div>
				</div>
			</div>
			<!--ind-list end-->
			<div class="ind-new">
			    <div class="ind-new-top">
			    <i class="icon ind-icon iconfont">&#xe60d;</i><h3>最新</h3>
			    </div>
			    <div class="ind-wrap">
				    <div class="ind-scroll">
					  <dl class="ind-detial">
					  	<dt class="ind-detial-img">
					  		<img src="img/index-list1.jpg"/>
					  	</dt>
					  	<dd class="ind-detial-info">
					  		<h4>奔跑吧青年</h4>
					  		<p class="ind-detial-p1">当你还在迷茫，纠结要不要做设计的时候，当你还在在思考我该做什么的时候...</p>
					  		<p class="ind-detial-p2">
					  			<span><i class="icon iconfont ind-icn-p2">&#xe60e;</i>105</span>
					  			<span><i class="icon iconfont ind-icn-p2">&#xe612;</i>105</span>
					  		</p>
					  	</dd>
					  </dl>
					  <dl class="ind-detial">
					  	<dt class="ind-detial-img">
					  		<img src="img/index-list1.jpg"/>
					  	</dt>
					  	<dd class="ind-detial-info">
					  		<h4>奔跑吧青年</h4>
					  		<p class="ind-detial-p1">当你还在迷茫，纠结要不要做设计的时候，当你还在在思考我该做什么的时候...</p>
					  		<p class="ind-detial-p2">
					  			<span><i class="icon iconfont ind-icn-p2">&#xe60e;</i>105</span>
					  			<span><i class="icon iconfont ind-icn-p2">&#xe612;</i>105</span>
					  		</p>
					  	</dd>
					  </dl>
					  <dl class="ind-detial">
					  	<dt class="ind-detial-img">
					  		<img src="img/index-list1.jpg"/>
					  	</dt>
					  	<dd class="ind-detial-info">
					  		<h4>奔跑吧青年</h4>
					  		<p class="ind-detial-p1">当你还在迷茫，纠结要不要做设计的时候，当你还在在思考我该做什么的时候...</p>
					  		<p class="ind-detial-p2">
					  			<span><i class="icon iconfont ind-icn-p2">&#xe60e;</i>105</span>
					  			<span><i class="icon iconfont ind-icn-p2">&#xe612;</i>105</span>
					  		</p>
					  	</dd>
					  </dl>
					  <dl class="ind-detial">
					  	<dt class="ind-detial-img">
					  		<img src="img/index-list1.jpg"/>
					  	</dt>
					  	<dd class="ind-detial-info">
					  		<h4>奔跑吧青年</h4>
					  		<p class="ind-detial-p1">当你还在迷茫，纠结要不要做设计的时候，当你还在在思考我该做什么的时候...</p>
					  		<p class="ind-detial-p2">
					  			<span><i class="icon iconfont ind-icn-p2">&#xe60e;</i>105</span>
					  			<span><i class="icon iconfont ind-icn-p2">&#xe612;</i>105</span>
					  		</p>
					  	</dd>
					  </dl>
				    </div>
			    </div>
			</div>
		</div>
	</div>
<script type="text/javascript" src="js/jq1.8.3.js"></script>
<script type="text/javascript" src="js/resize.js"></script>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/swiper-3.3.1.jquery.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/swiper.animate1.0.2.min.js"></script>
</body>
<script>  
 $(function(){
//侧边栏滑动
    $(".ind-head i").eq(0).on("tap",function(){
   		$(".ind-out").animate({left:"580px"},"linear")
    });
    $(".ind-aside-head i").eq(0).on("tap",function(){
   		$(".ind-out").animate({left:0},"linear")
    }); 
    var mySwiper = new Swiper ('.swiper-container', {
    loop:true,
    autoplay: 3000,
    paginationClickable:true,//点击分页器的指示点分页器会控制Swiper切换。
    pagination: '.swiper-pagination'
    
    }) ;
    var myScroll = new IScroll('.ind-wrap', { 
		         startY:0,
				 scrollbars: true, 
				 mouseWheel: true, 
				 interactiveScrollbars: true 
			 }); 
   
 })
  
  
  </script>
</html>
